@extends('layouts.base')
@section('title', '出货管理')
@section('content')
@section('admin-style')
<link rel="stylesheet" href="{{ asset('assets\element-ui\lib\theme-chalk\index.css') }}">
<!-- import Vue before Element -->
<script src="{{ asset('assets\vue\vue.js')}}"></script>

<!-- import JavaScript -->
<script src="{{ asset('assets\element-ui\lib\index.js') }}"></script>
<script src="{{ asset('assets\axios\axios.min.js') }}"></script>
	<style>
		.wrap{
			width: 400px; //设置需要固定的宽度
		}
	</style>
@stop

		<!-- ============================================================== -->
<!-- Container fluid  -->
<!-- ============================================================== -->
<div class="container-fluid">
	<!-- ============================================================== -->
	<!-- Bread crumb and right sidebar toggle -->
	<!-- ============================================================== -->
	<div class="row page-titles">
		<div class="col-md-5 align-self-center">
			<h3 class="text-themecolor">设备操作日志</h3>
		</div>
		<div class="col-md-7 align-self-center">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="javascript:void(0)">首页</a></li>
				<li class="breadcrumb-item">日志管理</li>
				<li class="breadcrumb-item active">设备日志</li>
			</ol>
		</div>
	</div>
	<!-- ============================================================== -->
	<!-- End Bread crumb and right sidebar toggle -->
	<!-- ============================================================== -->

	<!-- ============================================================== -->
	<!-- Start Page Content -->
	<!-- ============================================================== -->
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-body">
					<h6 class="card-subtitle"></h6>
					<div class="card-body">
						<el-form ref="formSearch" :inline="true" :model="formSearch" class="demo-form-inline">
							<el-form-item label="设备编号">
								<el-input v-model="formSearch.imei" placeholder="imei"></el-input>
							</el-form-item>
							<el-form-item label="到期时间">
								<el-date-picker
									v-model="formSearch.time"
									type="daterange"
									align="right"
									unlink-panels
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="yyyy-MM-dd"
									:picker-options="pickerOptions">
								</el-date-picker>
							</el-form-item>
						</el-form>
                        <form method="get" action="{{ route('admin.mqttLogs.index') }}">
                            <div class="form-row">
                                <div class="col-md-3 mb-3">
                                  <input type="text" v-show="false" name="imei" class="form-control" id="validationDefault04" placeholder="imei" :value="formSearch.imei" >
                                </div>
                                <div class="col-md-3 mb-3">
								    <input v-if="formSearch.time != ''" v-show="false" name="time" :value="formSearch.time">
                                </div>                 
                            </div>
                            <button class="btn btn-primary" type="submit">筛选</button>
                            <a href="{{ route('admin.mqttLogs.index') }}" class="btn btn-info">重置</a>
                            <a href="{{ route('admin.mqttLogs.index') }}" class="btn btn-warning">刷新</a>
                        </form>
					</div>
					<div class="table-responsive">
						<table id="demo-foo-addrow" class="table table-bordered m-t-30 table-hover contact-list" data-paging="true" data-paging-size="7">
							<thead>
							<tr>
								<th>ID</th>
								<th>关键字</th>
								<th>数据内容</th>
								<th>IMEI</th>
								<th>创建时间</th>
							</tr>
							</thead>
							<tbody>
							@foreach($mqtt_logs as $value)
								<tr>
									<td>{{ $value->id }}</td>
									<td>{{ $value->key }}</td>
									<td><div class="wrap">{{ $value->value }}</div></td>
									<td>{{ $value->imei }}</td>
									<td>{{ $value->created_at }}</td>
								</tr>
							@endforeach
							</tbody>
						</table>
						{{ $mqtt_logs->appends(['time' => $time, 'imei' => $imei])->links() }}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

@stop
@section('admin-js')
	<script type="text/javascript">		
		Vue.prototype.$axios = axios;
	    Vue.prototype.$dcopy = function($arr){
	        return JSON.parse(JSON.stringify($arr));
	    }
		new Vue({
			el: '#app',
			data: function(){
				var time = "{{ $time }}";
				if(time){
					var time = JSON.stringify("{{ $time }}").split(',');
				}
				return {
					formSearch: {
						imei: "{{ $imei }}" || '',									        
						time:time,
					},
					dialogFormDistribution:false,
					pickerOptions: {
			          shortcuts: [{
			            text: '最近一周',
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			              picker.$emit('pick', [start, end]);
			            }
			          }, {
			            text: '最近一个月',
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			              picker.$emit('pick', [start, end]);
			            }
			          }, {
			            text: '最近三个月',
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			              picker.$emit('pick', [start, end]);
			            }
			          }]
			        },
				}	
			},
			mounted:function(){
			},
			methods:{
			}
		});
		
	</script>

@stop

